<template>
  <div class="cusflow-charts-components">
    <div class="cusflow-charts-wrapper">
      <h5 class="chart-title">
        客流量分布<span class="text-unit">(人)</span>
      </h5>
      <chart :options="options"
             :init-options="initOptions"
             auto-resize
             class="echarts-item">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/graphic'
// import 'echarts/lib/component/grid'
import 'echarts/lib/chart/line'
import options from './echartsOptions.js'

const DEFAULT_TIME_UNIT = '时'
const DEFAULT_AGE_UNIT = '岁'

export default {
  name: 'cusflow-charts-components',
  components: {
    chart: ECharts
  },
  data () {
    return {
      options,
      initOptions: {
        renderer: 'canvas'
      }
    }
  },
  props: {
    passengerFlow: {
      default: null
    },
    hourOfToday: 0
  },
  watch: {
    'passengerFlow': function () {
      let initOptions = options
      // 处理数据
      // x轴 数据  客户流量
      if (this.passengerFlow) {
        let passengerX = []
        for (let key in this.passengerFlow) {
          passengerX.push(key + DEFAULT_TIME_UNIT)
        }
        let dataobj = {}
        // series 数据
        for (let key in this.passengerFlow) {
          if (this.hourOfToday && key > this.hourOfToday) {
            break
          }
          const array = this.passengerFlow[key]
          for (let i = 0; i < array.length; i++) {
            if (Array.isArray(dataobj[array[i]['ageRange']])) {
              dataobj[array[i]['ageRange']].push(array[i]['value'])
            } else {
              dataobj[array[i]['ageRange']] = [array[i]['value']]
            }
          }
        }
        let passengerValue = []
        let legendtooltip = []
        // 合并固定echarts的属性
        const fixedOptions = {
          type: 'line',
          smooth: true,
          showSymbol: false
        }
        for (let k in dataobj) {
          let obj = {}
          obj.name = k
          obj.data = dataobj[k]
          Object.assign(obj, fixedOptions)
          passengerValue.push(obj)
        }
        // 客流表岁数
        for (let i = 0; i < passengerValue.length; i++) {
          if (i === 0) {
            passengerValue[i]['name'] = '小于' + (parseInt(passengerValue[i]['name'].slice(passengerValue[i]['name'].indexOf('-') + 1)) + 1) + DEFAULT_AGE_UNIT
          } else if (i === passengerValue.length - 1) {
            passengerValue[i]['name'] = '大于' + (passengerValue[i]['name'].slice(0, passengerValue[i]['name'].indexOf('-'))) + DEFAULT_AGE_UNIT
          } else {
            passengerValue[i]['name'] = passengerValue[i]['name'] + DEFAULT_AGE_UNIT
          }
          legendtooltip.push(passengerValue[i]['name'])
        }
        // 判断数据是否全为0
        let isDataEmpty = []
        for (let i = 0; i <= passengerValue.length - 1; i++) {
          isDataEmpty.push(passengerValue[i]['data'].some((item) => item !== 0))
        }
        if (isDataEmpty.some((item) => item === true)) {
          initOptions.legend.data = legendtooltip
          initOptions.xAxis.data = passengerX
          initOptions.series = passengerValue || []
        } else {
          initOptions.legend.data = []
          initOptions.xAxis.data = []
          initOptions.series = []
        }
      } else {
        initOptions.legend.data = []
        initOptions.xAxis.data = []
        initOptions.series = []
      }
      /**
       * [if description] 如果没有图表数据的时候, 显示tooltip
       * @param  {Number} initOptions.series[0]['data'].length [description]
       */
      initOptions.graphic[0]['style']['fill'] = (initOptions.series.length === 0) ? '#000' : 'transparent'
      return initOptions
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .cusflow-charts-components {
    width:50%;
    height:350px;
    .cusflow-charts-wrapper {
      height:330px;
      .chart-title {
        margin:0;
        box-sizing: border-box;
        /* padding-left: 30px; */
        font-size: 14px;
        line-height: 28px;
        .text-unit{
          font-size: 12px;
          color: #888;
          font-weight: 400;
          padding-left: 5px;
        }
      }
      .echarts-item {
        width: 100%;
        height:330px;
      }
    }
  }
</style>
